"use client"

import { Header } from "@/components/header"
import { ProductGrid } from "@/components/product-grid"
import { Footer } from "@/components/footer"
import { useLanguage } from "@/context/language-context"

export default function ProductsPage() {
  const { dictionary } = useLanguage()
  return (
    <div className="flex flex-col min-h-screen">
      <Header />
      <main className="flex-1">
        <section className="py-12 md:py-20 bg-white dark:bg-gray-800 text-center">
          <div className="container mx-auto px-4 md:px-6">
            <h1 className="text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-gray-50">
              {dictionary.ourProducts}
            </h1>
            <p className="text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">{dictionary.productsPageIntro}</p>
          </div>
        </section>
        <ProductGrid />
      </main>
      <Footer />
    </div>
  )
}
